<template>
	<view class="content" style="background-color: rgb(247,248,250);">
		<view class="top" style="padding-top: 60rpx;">
			<view class="topin">
				<image :src="usertouxiang" mode="" class="pic1"></image>
				<view class="personal">
					<h1 class="username" v-if="token" style="font-size: 40rpx;">{{nickname}}</h1>
					<h1 class="username" v-else  style="font-size: 40rpx;"><span @click="gologin" >登陆</span>/ <span @click="goreg">注册</span> </h1>

					<p class="userinfo" v-if="token">ID {{userId}} | 成长值:{{growth}} | 段位 {{level}}</p>
				</view>
				<view class="tip_information" @click="gopersonal">
					
					<u-toast ref="uToast" />
					个人资料
				</view>
			</view>
		</view>
		<view class="zr">
			<view class='user_box'>
			</view>
			<view class="water">
				<view class="water-c">
					<view class="water-1"> </view>
					<view class="water-2"> </view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="center_top">
				<view class="ct_one" @click="gofen">
					<text class="upup">{{score}}</text>
					<view class="downdown">积分</view>
				</view>
				<view class="ct_two" @click="goyou">
					<text class="upup">{{source}}</text>
					<view class="downdown">优惠券</view>
				</view>
				<view class="ct_three" @click="yue">
					<text class="upup">{{scoreLastRound}}</text>
					<view class="downdown">余额</view>
				</view>
			</view>
			<view class="center_mid">
				<view class="cmtop" @click="tab1">
					<view class="myorder">我的订单</view>
					<view class="allorder">查看全部订单<u-icon name="arrow-right"></u-icon></view>
				</view>
				<view class="cmbot">
					<view class="iconfont icon-qianbao" @click="tab1"  style="position: relative;">
						<p>待付款</p>
						<span class="posi">{{count_id_no_pay}}</span>
					</view>
					<view class="iconfont icon-31daifahuo" @click="tab1"  style="position: relative;">
						<p>待发货</p>
						<span class="posi">{{count_id_no_transfer}}</span>
					</view>
					<view class="iconfont icon-daishouhuo" @click="tab1" style="position: relative;">
						<p>待收货</p>
						<span class="posi">{{count_id_peisonging}}</span>
					</view>
					<view class="iconfont icon-31daipingjia" @click="tab1"  style="position: relative;">
						<p>评价</p>
						<span class="posi">{{count_id_no_reputation}}</span>
					</view>
					<view class="iconfont icon-shouhou" @click="tab2">
						<p>退款/售后</p>
						<span class="posi">{{count_id_close}}</span>
					</view>
				</view>
			</view>
			<view class="center_adc">
				<view class="cmtop">
					<view class="myorder">常用功能</view>
				</view>
				<view class="cmbot">
					<view class="iconfont icon-qianbao1 ii" @click="qianbao">
						<p>我的钱包</p>
					</view>
					<view class="iconfont icon-jifenduihuan ii" @click="jifen">
						<p>积分兑换</p>
					</view>
					<view class="iconfont icon-youhuiquan-copy ii" @click="youhui">
						<p>优惠券</p>
					</view>
					<view class="iconfont icon-dizhi ii" @click="shouhuo">
						<p>收货地址</p>
					</view>
					<view class="iconfont icon-31shezhi ii" @click="shezhi">
						<p>设置</p>
					</view>
					<view class="iconfont icon-mianxingtiaosepan ii" @click="zhuti">
						<p>主题</p>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view>Copyright © 2019-2022 v-shop| v2</view>
			<view>最后发布时间: 202208161505</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: "",
				nickname: "",
				userId: "",
				growth: "",
				level: "",
				score: "",
				scoreLastRound: '',
				source: '',
				count_id_no_reputation: 0,
				count_id_close: 0,
				count_id_no_pay: 0,
				count_id_no_confirm: 0,
				count_id_wait_to_peisong: 0,
				count_id_success: 0,
				count_id_no_transfer: 0,
				count_id_peisonging: 0,
				usertouxiang: "../../static/images/usertou.png",
				flag: true
			}
		},
		onLoad() {



		},
		onReady() {},
		onShow() {

			let that = this
			uni.getStorage({
				key: 'token',
				success: function(res) {

					console.log(res.data);
					that.token = res.data
					that.getdetail()
				},
				fail: function(res) {
					console.log(res);
					that.token = ""
					that.getdetail()

				}

			})


		},
		methods: {
			gologin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			goreg() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			gopersonal() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/profiles/profile'
					})
				} else {
					this.$refs.uToast.show({
						message: '请先登陆',
						type: 'warning'
					})
				}

			},
			getdetail() {

				let that = this

				if (this.token) {
					uni.request({
						url: " https://api.it120.cc/xiaochengxu/user/detail?token=" + that.token,
						method: "get",
						dataType: "json",
						success: function(res) {
							console.log(res)
							that.nickname = res.data.data.base.nick
							that.userId = res.data.data.base.id
							that.level = res.data.data.userLevel.name
							that.source = res.data.data.base.referrerType

							if (res.data.data.base.avatarUrl) {
								that.usertouxiang = res.data.data.base.avatarUrl
							} else {
								that.usertouxiang = '../../static/images/usertou.png'
							}
						}
					});

					uni.request({
						url: " https://api.it120.cc/xiaochengxu/user/amount?token=" + that.token,
						method: "get",
						dataType: "json",
						success: function(res) {
							console.log(res);
							that.growth = res.data.data.growth
							that.score = res.data.data.score
							that.scoreLastRound = res.data.data.balance
							
						}
					});

					uni.request({
						url: "https://api.it120.cc/xiaochengxu/order/statistics?token=" + that.token,
						method: "get",
						dataType: "json",
						success: function(res) {
							console.log(res);
							that.count_id_no_reputation = res.data.data.count_id_no_reputation
							that.count_id_close = res.data.data.count_id_close
							that.count_id_no_confirm = res.data.data.count_id_no_confirm
							that.count_id_no_pay = res.data.data.count_id_no_pay
							that.count_id_no_transfer = res.data.data.count_id_no_transfer,
								that.count_id_peisonging = res.data.data.count_id_peisonging,
								that.count_id_success = res.data.data.count_id_success
							that.count_id_wait_to_peisong = res.data.data.count_id_wait_to_peisong
						}
					});
				} else {
					this.usertouxiang = '../../static/images/usertou.png'
					this.nickname = ""
					this.userId = ""
					this.growth = 0
					this.level = ""
					this.score = 0
					this.scoreLastRound = 0
					this.source = 0
					this.count_id_no_reputation = 0
					this.count_id_close = 0
					this.count_id_no_pay = 0
					this.count_id_no_confirm = 0
					this.count_id_wait_to_peisong = 0
					this.count_id_success = 0
					this.count_id_no_transfer = 0
					this.count_id_peisonging = 0
				}


			},
			yue() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/balance/balance',

					})
				} else {
					this.$refs.uToast.show({
						message: '请先登陆',
						type: 'warning'
					})
				}
			},
			shezhi() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/Set/Set'
					})
				} else {
					this.$refs.uToast.show({
						message: '请先登陆',
						type: 'warning'
					})
				}

			},
			zhuti() {
				uni.navigateTo({
					url: '/pages/them/them'
				})
			},
			shouhuo() {

				if (this.token) {
					uni.navigateTo({
						url: '/pages/address/address'
					})
				} else {
					this.$refs.uToast.show({
						message: '请先登陆',
						type: 'warning'
					})
				}

			},
			youhui() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/coupon/coupon'
					})
				} else {
					this.$refs.uToast.show({
						message: '请先登陆',
						type: 'warning'
					})
				}

			},
			jifen() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/integral/integral'
					})
				} else {
					this.$refs.uToast.show({
						message: '请先登陆',
						type: 'warning'
					})
				}

			},
			qianbao() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/balance/balance'
					})
				} else {
					this.$refs.uToast.show({
						message: '请先登陆',
						type: 'warning'
					})
				}

			},
			tab1() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/orderList/orderList'
					})
				} else {
					this.$refs.uToast.show({
						message: '请先登陆',
						type: 'warning'
					})
				}
			},
			tab2() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/orderList/orderRefund'
					})
				} else {
					this.$refs.uToast.show({
						message: '请先登陆',
						type: 'warning'
					})
				}
			},
			gofen(){
				if (this.token) {
					uni.navigateTo({
						url: '/pages/balance/balance'
					})
				} else {
					this.$refs.uToast.show({
						message: '请先登陆',
						type: 'warning'
					})
				}
			},
			goyou(){
				if (this.token) {
					uni.navigateTo({
						url: '/pages/coupon/coupon'
					})
				} else {
					this.$refs.uToast.show({
						message: '请先登陆',
						type: 'warning'
					})
				}
			}
		},


	}
</script>

<style lang="scss">
	.top {
		width: 100%;
		height: 160rpx;
		background-color: rgb(27, 167, 132);
		position: relative;
		z-index: 2;
		padding-top: 40rpx;
	}

	.topin {
		height: 140rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding: 0rpx 30rpx;
		position: relative;
	}

	.pic1 {
		width: 140rpx;
		height: 140rpx;
		margin-right: 15rpx;
		border-radius: 50%;
	}

	.personal {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.username {
		font-weight: 500;
		
		font-size: 65rpx;
		color: white;
		
	}

	.userinfo {
		color: white;
		
		padding-top: 26rpx;
		font-size: 24rpx;
	}

	.tip_information {
		width: 120rpx;
		height: 40rpx;
		background-color: rgb(22, 134, 106);
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		position: absolute;
		right: 60rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 40rpx;
		color: white;
	}

	.center {
		height: 800rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.center_top {
		width: 690rpx;
		height: 130rpx;
		margin: 0 auto;
		background-color: white;
		margin-top: 0rpx;
		border-radius: 25rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.center_top view {
		width: 230rpx;
	}

	.ct_one,
	.ct_two,
	.ct_three {
		text-align: center;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
	}

	.upup {
		font-size: 35rpx;
		margin-bottom: 10rpx;
	}

	.downdown {
		font-size: 25rpx;
	}

	.center_mid {
		width: 690rpx;
		height: 220rpx;
		margin: 0 auto;
		background-color: white;
		margin-top: 32rpx;
		border-radius: 25rpx;
	}

	.cmtop {
		width: 100%;
		height: 96rpx;
		border-bottom: 1px solid gainsboro;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.myorder {
		font-weight: 600;
		font-size: 30rpx;
		margin-left: 20rpx;
	}

	.allorder {
		font-size: 25rpx;
		color: darkgray;
		margin-right: 20rpx;
		display: flex;
	}

	.cmbot {
		width: 100%;
		height: 124rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}

	.cmbot view {
		width: 20%;
		height: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
	}

	.ii {
		width: 25% !important;
	}

	.cmbot view p {
		font-size: 26rpx;
		margin-top: 5rpx;
	}

	.center_adc {
		width: 690rpx;
		height: 350rpx;
		margin: 0 auto;
		background-color: white;
		margin-top: 32rpx;
		border-radius: 25rpx;
	}

	.bottom {
		height: 130rpx;
		text-align: center;
		padding-top: 40rpx;
	}

	.bottom view {
		font-size: 25rpx;
		color: $uni-text-color-grey;
	}

	.zr {
		color: white;
		background: rgb(27, 167, 132);
		width: 100%;
		height: 200upx;
		position: relative;
		top: -80rpx;
		z-index: 1;
	}

	.water {
		position: absolute;
		left: 0;
		bottom: -10upx;
		height: 30upx;
		width: 100%;
		z-index: 1;
	}

	.water-c {
		position: relative;
	}

	.water-1 {
		background: url("") repeat-x;
		background-size: 600upx;
		animation: wave-animation-1 4.5s infinite linear;
	}

	.water-2 {
		top: 5upx;
		background: url("") repeat-x;
		background-size: 600upx;
		animation: wave-animation-2 8s infinite linear;
	}

	.water-1,
	.water-2 {
		position: absolute;
		width: 100%;
		height: 60upx;
	}

	.back-white {
		background: #fff;
	}

	@keyframes wave-animation-1 {
		0% {
			background-position: 0 top;
		}

		100% {
			background-position: 600upx top;
		}
	}

	@keyframes wave-animation-2 {
		0% {
			background-position: 0 top;
		}

		100% {
			background-position: 600px top;
		}
	}

	.user_box {
		display: flex;
		z-index: 66 !important;
		animation: love 1.5s ease-in-out;
		animation-fill-mode: forwards;
	}

	.userInfo_name {
		flex: 1;
		vertical-align: middle;
		width: 100%;
		margin-left: 5%;
		margin-top: 5%;
		font-size: 42upx;
	}

	.userInfo {
		flex: 1;
		width: 100%;
		border-radius: 50%;
		overflow: hidden;
		max-height: 150upx;
		max-width: 150upx;
		margin-left: 5%;
		margin-top: 5%;
		border: 2px solid #fff;
	}

	.posi {
		position: absolute;
		    top: 30rpx;
		    right: 44rpx;
		    box-sizing: border-box;
		    min-width: 4.27vw;
		    padding: 0 0.8vw;
		    color: #fff;
		    font-weight: 500;
		    font-size: 3.2vw;
		    font-family: -apple-system-font,Helvetica Neue,Arial,sans-serif;
		    line-height: 1.2;
		    text-align: center;
		    background-color: #ee0a24;
		    border: 1px solid #fff;
		    border-radius: 4.27vw;
		    -webkit-transform: translate(50%,-50%);
		    transform: translate(50%,-50%);
		    -webkit-transform-origin: 100%;
		    transform-origin: 100%;
	}
	
</style>